<template>
  <div class="container">
    <v-header :goBack="true" :title="title" :showRight="true">
      <router-link to="/market/debit-credit" class="fa fa-home" slot="icon-right"></router-link>
    </v-header>
    <div class="account-content">
      <header class="header d-flex justify-content-center">
        <div class="profile d-flex align-items-center">
          <img class="avatar" :src="avatar" alt="avatar" />
          <span class="phone" v-if="user">{{user.mobile}}</span>
        </div>
      </header>

      <div class="d-flex flex-column">
        <router-link to="/cards">
          <section class="section d-flex nav border-bottom-1px align-items-center">
            <div class="icon-left">
              <img src="../../../static/images/account/mine-friend.png" class="icon">
            </div>
            <div class="info flex-fill">
              <span class="title">邀请好友</span>
            </div>
            <span class="notic"></span>
            <div class="icon-right d-flex justify-content-center">
              <i class="fa fa-angle-right fa-lg"></i>
            </div>
          </section>
        </router-link>

        <router-link to="/about-us">
          <section class="section d-flex nav border-bottom-1px align-items-center">
            <div class="icon-left">
              <img src="../../../static/images/account/mine-about.png" class="icon">
            </div>
            <div class="info flex-fill">
              <span class="title">关于我们</span>
            </div>
            <span class="notic"></span>
            <div class="icon-right d-flex justify-content-center">
              <i class="fa fa-angle-right fa-lg"></i>
            </div>
          </section>
        </router-link>

        <a href="javascript:void(0);" @click="logout" class="link-logout">
          <section class="section flex-fill d-flex nav border-1px">
            <button class="logout">安全退出</button>
          </section>
        </a>
      </div>
    </div>
    <v-footer :currentIndex="3"></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '@/components/header/head'
  import footer from '@/components/common/footer'
  import {mapState, mapActions} from 'vuex'
  import {JwtToken} from '@/config/mUtils'

  export default {
    data() {
      return {
        title: '我的',
        avatar: '/static/images/logo.png'
      }
    },
    created() {
      this.initData()
    },
    methods: {
      async initData() {
        if (!this.user) {
          await this.getUserInfo()
        }
        if (this.authorized === false) {
          this.$router.push('/login')
        }
      },
      logout() {
        JwtToken.remove()
        this.$router.push('/login')
      },
      ...mapActions(['getUserInfo'])
    },
    components: {
      'v-header': header,
      'v-footer': footer
    },
    computed: {
      ...mapState(['user', 'authorized'])
    }
  }
</script>

<style lang="stylus" type="text/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/variable.styl"

  .account-content
    margin-top: 2rem;
    .header
      background: url('/static/images/account/header-bg.png') no-repeat
      background-size: 100% 78%
      margin-bottom: 12px
      .profile
        width: 92%
        padding: 16px 0
        border-radius: 10px
        margin-top: 2rem
        background: $color-white
        .avatar
          flex: 0 0 60px
          width: 60px
          height: 60px
          padding: 0 18px
          border-radius: 50%
        .phone
          font-size: 16px
          font-weight: 500
    .section
      padding: 0 14px
    .nav
      flex: 0 0 50px
      height: 50px
      margin-top: 12px
      .icon-left
        flex: 0 0 30px
        width: 30px
        .icon
          width: 22px
          height: 22px
          vertical-align: top
          font-weight: 600
      .info
        margin-left: 6px
        color: #333333
        .title
          font-size: 16px
          color: #333333
          vertical-align: top
      .icon-right
        flex: 0 0 28px
        width: 28px
        color: #cccccc;
        font-size: 24px
        text-align: right;
      .notice
        font-size: 15px
        color: #cccccc
    .link-logout
      display: inline-block
      margin-top: 20px
    .logout
      width: 100%
      height: 100%
      border: none
      background: #fff
      color: #FF5F4B
      font-size: 16px
      &::after
        border: none
    .mycards
      margin-top: 0
</style>
